<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=VHYqgkmedOCoMq0MymDs8b7Z23kNxcQB"></script>
    <title>地图展示</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度

    var map = new BMapGL.Map('allmap');// 创建Map实例
    var point = new BMapGL.Point(117.162349, 36.987651);
    var marker = new BMapGL.Marker(point);
    map.addOverlay(marker);// 将标注添加到地图中    
       
    map.centerAndZoom(point, 13);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 
    var content = "金麒麟2号门";
    var label = new BMapGL.Label(content, {       // 创建文本标注
        position: point,                          // 设置标注的地理位置
        offset: new BMapGL.Size(0, 0)           // 设置标注的偏移量
    })
    map.addOverlay(label);                        // 将标注添加到地图中

    var geoc = new BMapGL.Geocoder();
    map.addEventListener('click', function (e) {
        var pt = e.latlng;
        geoc.getLocation(pt, function (rs) {
            var addComp = rs.addressComponents;
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        })
    })



</script>